<template>
  <van-overlay :show="showDialog">
    <div class="wrapper" id="inner_dialog">
      <transition name="modal-fade">
        <div class="dialog_bg" v-if="showDialog">
          <img
            v-if="reason_to_showDialog === 0"
            src="../img/if_giveup.png"
          />
          <img v-if="reason_to_showDialog === 2" src="../img/finish.png" />
          <img
            v-if="reason_to_showDialog === 1"
            src="../img/Clearance.png"
          />
          <img v-if="reason_to_showDialog === 3" src="../img/finish.png" />
          <img v-if="reason_to_showDialog === 4" src="../img/finish.png" />
          <img v-if="reason_to_showDialog === 5" src="../img/remind.png" />
          <div v-if="reason_to_showDialog === 5" class="rules">
            挑戰時間已經跨天,需要結算前一天獎勵。是否開啟新一天的挑戰？
          </div>
          <div class="received_reward">
            <img src="../img/received_reward.png" />
            <img src="../img/diamand.png" id="fly_diamand" />
            <div class="diamand_count" v-if="reason_to_showDialog === 1">
              {{ today_stage_index + 10 }}
            </div>
            <div class="diamand_count" v-else>{{ total_reward }}</div>
          </div>
          <div class="action_sheet" v-if="reason_to_showDialog === 0">
            <img
              src="../img/back_to_hall.png"
              class="first_pic"
              @click="back_to_hall"
            />
            <img
              src="../img/continue_game.png"
              class="second_pic"
              @click="continue_game"
            />
          </div>
          <div class="action_sheet" v-if="reason_to_showDialog === 2">
            <img
              src="../img/continue_game.png"
              class="first_pic"
              @click="refresh_game"
            />
            <img
              src="../img/back_to_hall.png"
              class="second_pic"
              @click="back_to_hall"
            />
          </div>
          <div class="action_sheet" v-if="reason_to_showDialog === 1">
            <img
              src="../img/continue_game.png"
              class="first_pic"
              @click="next_challenge"
            />
          </div>
          <div class="action_sheet" v-if="reason_to_showDialog === 3">
            <img
              src="../img/back_to_hall.png"
              class="first_pic"
              @click="back_to_hall"
            />
          </div>
          <div class="action_sheet" v-if="reason_to_showDialog === 4">
            <img
              src="../img/back_to_hall.png"
              class="first_pic"
              @click="back_to_hall"
            />
          </div>
          <div class="action_sheet" v-if="reason_to_showDialog === 5">
            <template v-if="!over_time_exit">
              <img
                src="../img/continue_game.png"
                class="first_pic"
                @click="refresh_page"
              />
              <img
                src="../img/back_to_hall.png"
                class="second_pic"
                @click="back_to_hall"
              />
            </template>
            <template v-else>
              <img
                src="../img/back_to_hall.png"
                class="first_pic"
                @click="back_to_hall"
              />
            </template>
          </div>
        </div>
      </transition>
    </div>
  </van-overlay>

</template>

<script>
export default {
  name: 'innerGameDialog.vue',
  props:{
    showDialog:{
      default:false,
      type:Boolean
    },
    reason_to_showDialog:{
      default:0,
      type:Number
    },
    over_time_exit:{
      default:false,
      type:Boolean
    },
    today_stage_index:{
      default:0,
      type:Number
    },
    total_reward:{
      default:0,
      type:Number
    }

  },
  data() {
    return {}
  },
  mounted() {

  },
  methods: {
    back_to_hall() {
      this.$emit("back_to_hall")
    },
    refresh_page(){
      this.$emit("refresh_page")

    },
    next_challenge(){
      this.$emit("next_challenge")

    },
    refresh_game(){
      this.$emit("refresh_game")

    },
    continue_game(){
      this.$emit("continue_game")

    },
  }

};

</script>

<style scoped lang="scss">
@keyframes growShrink {
  0% {
    transform: scale(0.4); /* 动画开始时的大小 */
  }
  45% {
    transform: scale(1.1); /* 动画中间时的大小 */
  }
  100% {
    transform: scale(1); /* 动画结束时的大小 */
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .dialog_bg {
    animation: growShrink 0.5s 1;
    width: 389px;
    height: 309px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .rules {
      position: absolute;
      top: 148px;
      left: 85px;
      width: 220px;
      height: 20px;
      font-size: 14px;
      display: flex;
      color: gold;
      justify-content: center;
    }
    .received_reward {
      position: absolute;
      top: 192px;
      left: 112px;
      width: 157px;
      height: 38px;
      display: flex;

      img:nth-child(1) {
        width: 86px;
        height: 21px;
      }
      img:nth-child(2) {
        width: 28px;
        height: 24px;
        margin: 0 6px;
      }
      .diamand_count {
        width: 27px;
        height: 21px;
        line-height: 21px;
        font-size: 27px;
        color: gold;
      }
    }
    .action_sheet {
      .first_pic {
        position: absolute;
        bottom: 40px;
        left: 112px;
        width: 157px;
        height: 48px;
      }
      .second_pic {
        position: absolute;
        bottom: -16px;
        left: 112px;
        width: 157px;
        height: 48px;
      }
    }
  }
}


</style>
